<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简易音频播放器</title>
  <style>
    #playerControls {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    input[type=range] {
      width: 100px;
    }
  </style>
</head>
<body>

<audio id="audio" src="" controls preload="none"></audio>
<div id="playerControls">
  <button onclick="playAudio()">播放</button>
  <button onclick="pauseAudio()">暂停</button>
  <input type="range" min="0" max="100" value="50" onchange="setVolume(this.value)">
  <progress id="progressBar" max="100" value="0"></progress>
</div>

<script>
  const audioElement = document.getElementById('audio');
  let isPlaying = false;

  function playAudio() {
    if (!isPlaying) {
      audioElement.play();
      isPlaying = true;
    }
  }

  function pauseAudio() {
    if (isPlaying) {
      audioElement.pause();
      isPlaying = false;
    }
  }

  function setVolume(volume) {
    audioElement.volume = volume / 100;
  }

  audioElement.addEventListener('timeupdate', () => {
    const progress = (audioElement.currentTime / audioElement.duration) * 100;
    document.getElementById('progressBar').value = progress;
  });

  // 假设你已经有了歌曲URL，这里仅演示如何设置
  // 实际应用中，你需要通过AJAX请求获取URL
  // fetch('YOUR_API_ENDPOINT?query=SONG_NAME')
  //     .then(response => response.json())
  //     .then(data => {
  //         audioElement.src = data.url;
  //     });
</script>

</body>
</html>